<template>
    <el-row :gutter="20">
        <el-col :span="7">
            <el-card>
                <div slot="header">
                    <el-input placeholder="输入关键字进行过滤" v-model="filterText" size="mini" style="padding-bottom: 15px;">
                        <i slot="suffix" class="el-icon-close" style="line-height: 2.5;" @click="filterText=''" title="点击清空"></i>
                    </el-input>
                    <el-button icon="el-icon-plus" @click="addCategory(1, 0, '')" size="mini">新增一级分类</el-button>&nbsp;&nbsp;（红色的分类名为已经删除的分类）
                </div>
                <div v-loading="isLoading">
                    <el-tree
                        :data="treeList"
                        node-key="id"
                        :expand-on-click-node = "false"
                        :default-expanded-keys="expandedNodeIds"
                        :filter-node-method = "filterNode"
                        :highlight-current = "true"
                        :accordion = "false"
                        ref="tree"
                        @node-click="editCategory"
                        >
                        <span class="custom-tree-node" slot-scope="{ node, data }">
                            <span>
                                <c-icon v-if="node.childNodes.length" :name="node.expanded ? 'folder-open' : 'folder'" scale="0.8"></c-icon> 
                                <c-icon v-else name="tags" scale="0.8"></c-icon> 
                                <span :style="Number(data.status) === 1 ? '' : 'color:red;'">{{ data.id }}--{{ data.label }}</span>
                            </span>
                            <span>
                                <span v-if="node.level < 4" @click.stop="() => addCategory(node.level + 1, data.id, data.label)">
                                    <el-button icon="el-icon-plus" size="mini" type="text" style="color:#545c64" round>新增子分类</el-button>
                                </span>
                            </span>
                        </span>
                    </el-tree>
                </div>
            </el-card>
        </el-col>
        <el-col :span="17">
            <el-card>
                <div slot="header" style="font-weight:bold;font-size:15px;">
                    {{editPageTitle}}
                </div>
                <el-form ref="dataSourceForm" label-position="left" label-width="100px" >
                    <el-form-item label="创建时间">
                        <el-input v-model="category.creat_time_f" style="width:200px;" size="mini" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="创建人">
                        <el-input v-model="category.creator_f" style="width:200px;" size="mini" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="更新时间">
                        <el-input v-model="category.update_time_f" style="width:200px;" size="mini" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="更新人">
                        <el-input v-model="category.updator_f" style="width:200px;" size="mini" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="分类层级">
                        <el-input v-model="category.category_level" style="width:100px;" size="mini" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="父分类ID">
                        <el-input v-model="category.parent_category_id" style="width:100px;" size="mini" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="分类名称">
                        <el-input v-model="category.category_name" style="width:300px;" size="mini"></el-input>
                    </el-form-item>
                    <el-form-item label="是否激活">
                        <el-switch v-model="category.status" :active-value = "1" :inactive-value = "0"></el-switch>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" :disabled="submitLoading" :loading="submitLoading" @click="submitForm">保存</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </el-col>
    </el-row>
</template>

<script>
import icon from 'vue-awesome';
import dayjs from 'dayjs';
import { getCategoryTree, saveCategory } from '../../api/crawl.js';
export default {
components: {
    'c-icon' : icon
},
data() {
    return {
        isLoading : true,
        treeList : [],
        filterText : '',//过滤树的关键字
        expandedNodeIds: [],//打开的节点集合
        //编辑分类
        category : {
            category_id : '',
            category_name : '',
            category_level : 1,
            parent_category_id : 0,
            status : 1,
            creat_time_f : '',
            creator_f : '',
            update_time_f : '',
            updator_f : '',
        },
        editPageTitle : '新增一级分类',
        submitLoading : false,
    }
},
created() {
    this.initTree();
},
watch: {
    filterText(val) {
        this.$refs.tree.filter(val);
    }
},
computed: {
},
mounted() {

},
methods: {
    initTree(){
        this.isLoading = true;
        getCategoryTree().then(data=>{
            console.log('getCategoryTree---------',data);
            this.isLoading = false;
            this.treeList = [];
            this.treeList = data;
        }).catch(e=>{
            console.log(e);
        });
    },
    //过滤题材树
    filterNode(value, data) {
        if (!value) return true;
        return (data.id+'--'+data.label).indexOf(value.toUpperCase()) !== -1;//搜索id和label
    },
    //新增分类
    addCategory(level, parentId, parentName) {
        this.editPageTitle = parentName ? `新增 [${parentId}--${parentName}] 的子分类` : '新增一级分类';
        this.category.category_id = '';
        this.category.category_name = '';
        this.category.category_level = level;
        this.category.parent_category_id = parentId;
        this.category.status = 1;
        this.category.creat_time_f = '';
        this.category.creator_f = '';
        this.category.update_time_f = '';
        this.category.updator_f = '';
    },
    formatDate(dateTime){
        if(!dateTime){
            return '--';
        }
        return dayjs(dateTime).format('YYYY-MM-DD HH:mm:ss');
    },
    //编辑分类
    editCategory(data, node) {
        console.log('editCategory------------', data, node)
        this.editPageTitle = `编辑分类 [${data.id}--${data.label}]`;
        this.category.category_id = data.id;
        this.category.category_name = data.label;
        this.category.category_level = node.level;
        this.category.parent_category_id = node.parent.data.id || 0;
        this.category.status = data.status;
        this.category.creat_time_f = this.formatDate(data.creat_time);
        this.category.creator_f = data.creator;
        this.category.update_time_f = this.formatDate(data.update_time);
        this.category.updator_f = data.updator;
    },
    //保存分类
    async submitForm(){
        console.log('category---', this.category)
        const postData = Object.assign({}, this.category);
        this.submitLoading = true;
        const res = await saveCategory(postData);
        console.log('saveCategory---', res)
        if(res){
            //提示保存成功
            this.$alert('保存成功！', '提示', {
                confirmButtonText: '确定'
            });
            this.initTree();
            //展开选中的节点
            this.expandedNodeIds.push(this.category.parent_category_id);
        }
        this.submitLoading = false;
    },
}
};
</script>
<style>

</style>



